<template>
  <el-aside class="sidebar-container" :width="collapsed ? '60px' : '240px'">
    <!-- 侧边栏头部 -->
    <div class="sidebar-header" @click="toggleCollapse">
      <div class="logo">
        <img src="https://picsum.photos/40/40" alt="Logo" v-show="!collapsed" class="logo-img">
        <img src="https://picsum.photos/40/40" alt="Mini Logo" v-show="collapsed" class="logo-mini-img">
      </div>
      <h1 class="title" v-show="!collapsed">管理系统</h1>
      <el-icon class="collapse-icon" v-show="!collapsed">
        <ArrowLeft />
      </el-icon>
      <el-icon class="expand-icon" v-show="collapsed">
        <ArrowRight />
      </el-icon>
    </div>

    <!-- 菜单导航 -->
    <el-menu @select="handleSelect" :default-active="activeMenu" :collapse="collapsed" :collapse-transition="false" router
      mode="vertical" class="sidebar-menu" background-color="#1e293b" text-color="#cbd5e1" active-text-color="#36d399">
      <!-- 菜单项 -->
      <template v-for="item in finalMenuList" :key="item.path">
        <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path">
          <template #title>
            <el-icon v-if="item.icon">
              <component :is="item.icon" />
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
            <el-icon v-if="child.icon">
              <component :is="child.icon" />
            </el-icon>
            <span>{{ child.name }}</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-else :index="item.path">
          <el-icon v-if="item.icon">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, ArrowRight, HomeFilled, Document, Setting, User, Monitor, Folder, ChatDotRound } from '@element-plus/icons-vue'

// 接收菜单数据和折叠状态
const props = defineProps({
  menuList: {
    type: Array,
    default: () => []
  },
  collapsed: {
    type: Boolean,
    default: false
  }
})

// 定义折叠事件
const emit = defineEmits(['update:collapsed'])

// 获取当前路由
const route = useRoute()
const router = useRouter()

// 当前激活的菜单
const activeMenu = computed(() => {
  // 匹配当前路由的菜单项
  return route.path
})

// 切换折叠状态
const toggleCollapse = () => {
  emit('update:collapsed', !props.collapsed)
}
// 处理菜单选择
const handleSelect = (path) => {
  // 路由跳转
  console.log(router)
  // router.push(path)
  console.log(path)
}
// 默认菜单数据
const defaultMenuList = [
  {
    path: '/dashboard',
    name: '仪表盘',
    icon: HomeFilled
  },
  {
    path: '/system',
    name: '系统管理',
    icon: Setting,
    children: [
      {
        path: '/system/user',
        name: '用户管理',
        icon: User
      },
      {
        path: '/system/role',
        name: '角色管理',
        icon: Folder
      },
      {
        path: '/system/menu',
        name: '菜单管理',
        icon: Document
      }
    ]
  },
  {
    path: '/monitor',
    name: '监控中心',
    icon: Monitor
  },
  {
    path: '/message',
    name: '消息中心',
    icon: ChatDotRound
  }
]

// 如果没有传入菜单数据，则使用默认菜单
const finalMenuList = computed(() => props.menuList.length > 0 ? props.menuList : defaultMenuList)
</script>

<style scoped>
.sidebar-container {
  height: 100vh;
  overflow: hidden;
  transition: width 0.3s ease;
  background-color: #1e293b;
}

.sidebar-header {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 16px;
}

.logo-img,
.logo-mini-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  transition: opacity 0.3s ease;
}

.collapse-icon,
.expand-icon {
  margin-left: auto;
  color: #cbd5e1;
  transition: transform 0.3s ease;
}

.collapse-icon:hover,
.expand-icon:hover {
  color: #36d399;
}

.sidebar-menu {
  height: calc(100vh - 60px);
  overflow-y: auto;
}

/* 自定义滚动条 */
.sidebar-menu::-webkit-scrollbar {
  width: 4px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
</style>